{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智面未来 - 登录/注册</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            'primary-light': '#4080FF',
            'primary-dark': '#0E42D2',
            secondary: '#36D399',
            accent: '#FF9F43',
            dark: '#1E293B',
            'dark-light': '#334155',
            light: '#F8FAFC',
            'light-gray': '#F1F5F9'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
            poppins: ['Poppins', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 15px 35px -10px rgba(0, 0, 0, 0.1)',
            'card-hover': '0 20px 40px -10px rgba(22, 93, 255, 0.2)',
            'btn': '0 8px 24px rgba(22, 93, 255, 0.25)',
            'btn-hover': '0 12px 30px rgba(22, 93, 255, 0.35)'
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-soft': 'pulse-soft 3s ease-in-out infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
            'fade-in': 'fade-in 0.5s ease-out forwards',
            'slide-up': 'slide-up 0.5s ease-out forwards',
            'scale-in': 'scale-in 0.3s ease-out forwards',
            'bounce-subtle': 'bounce-subtle 2s ease-in-out infinite'
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-15px)' }
            },
            pulse: {
              '0%, 100%': { transform: 'scale(1)' },
              '50%': { transform: 'scale(1.05)' }
            },
            glow: {
              '0%': { boxShadow: '0 0 10px rgba(22, 93, 255, 0.2)' },
              '100%': { boxShadow: '0 0 20px rgba(22, 93, 255, 0.4), 0 0 30px rgba(22, 93, 255, 0.2)' }
            },
            fade: {
              '0%': { opacity: '0' },
              '100%': { opacity: '1' }
            },
            slide: {
              '0%': { transform: 'translateY(20px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' }
            },
            scale: {
              '0%': { transform: 'scale(0.95)', opacity: '0' },
              '100%': { transform: 'scale(1)', opacity: '1' }
            },
            bounce: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-5px)' }
            }
          }
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
      .bg-glass {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .bg-glass-dark {
        background: rgba(30, 41, 59, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
      }
      .btn-hover {
        @apply hover:shadow-btn-hover hover:-translate-y-1 transition-all duration-300;
      }
      .tab-active {
        @apply border-b-2 border-primary text-primary font-semibold;
      }
      .tab-inactive {
        @apply border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors duration-300;
      }
      .parallax {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .scroll-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      .scroll-reveal.active {
        opacity: 1;
        transform: translateY(0);
      }
      .card-3d {
        transform-style: preserve-3d;
        perspective: 1000px;
      }

    }
  </style>

  <style>
    body {
      position: relative;
      overflow-x: hidden;
    }
    #particles-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    .main-content {
      position: relative;
      z-index: 10;
    }
    .hero-image {
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .hero-image:hover {
      transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
    }
    .feature-card {
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .feature-card:hover {
      transform: translateY(-10px) scale(1.02);
    }
    .form-input {
      transition: all 0.3s ease;
    }
    .form-input:focus {
      transform: translateY(-2px);
    }
    .gradient-border {
      position: relative;
      border-radius: 1.5rem;
      z-index: 0;
    }
    .gradient-border::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 1.6rem;
      background: linear-gradient(135deg, #165DFF, #36D399);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .gradient-border:hover::before {
      opacity: 1;
    }
    .nav-item {
      position: relative;
    }
    .nav-item::after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -2px;
      left: 0;
      background-color: #165DFF;
      transition: width 0.3s ease;
    }
    .nav-item:hover::after {
      width: 100%;
    }
    .notification {
      transform: translateX(calc(100% + 2rem));
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    }
    .notification.show {
      transform: translateX(0);
    }
  </style>
</head>

<body class="font-inter bg-light-gray text-dark antialiased min-h-screen flex flex-col">
  <!-- 粒子背景Canvas -->
  <canvas id="particles-bg"></canvas>

  <!-- 主内容区 -->
  <main class="flex-grow pt-20 pb-16 main-content">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex flex-col lg:flex-row items-center justify-between gap-10 lg:gap-20">
        <!-- 左侧品牌展示区 -->
        <div class="lg:w-1/2 space-y-8 scroll-reveal card-3d">
          <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold leading-tight font-poppins text-shadow animate-float">
            多模态智能<br>
            <span class="text-gradient bg-gradient-to-r from-primary to-secondary">面试训练系统</span>
          </h1>
          <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-lg leading-relaxed scroll-reveal text-balance" style="animation-delay: 0.2s">
            通过人工智能与多模态分析技术，为高校学生提供沉浸式模拟面试体验，精准诊断面试短板，助力职业发展。
          </p>

          <div class="space-y-6">
            <!-- 功能卡片1 -->
            <div class="feature-card flex items-start space-x-4 bg-white p-6 rounded-2xl shadow-card hover:shadow-card-hover gradient-border scroll-reveal parallax" style="animation-delay: 0.3s">
              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mt-1 flex-shrink-0 animate-pulse-soft">
                <i class="fa fa-microphone text-primary text-3xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-dark text-xl mb-2">语音分析</h3>
                <p class="text-gray-600 text-lg">智能识别语言逻辑与情感语调，提供表达优化建议</p>
              </div>
            </div>

            <!-- 功能卡片2 -->
            <div class="feature-card flex items-start space-x-4 bg-white p-6 rounded-2xl shadow-card hover:shadow-card-hover gradient-border scroll-reveal parallax" style="animation-delay: 0.4s">
              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mt-1 flex-shrink-0 animate-pulse-soft" style="animation-delay: 0.5s">
                <i class="fa fa-video-camera text-primary text-3xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-dark text-xl mb-2">视觉评估</h3>
                <p class="text-gray-600 text-lg">微表情与肢体语言分析，提升面试表现力</p>
              </div>
            </div>

            <!-- 功能卡片3 -->
            <div class="feature-card flex items-start space-x-4 bg-white p-6 rounded-2xl shadow-card hover:shadow-card-hover gradient-border scroll-reveal parallax" style="animation-delay: 0.5s">
              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mt-1 flex-shrink-0 animate-pulse-soft" style="animation-delay: 1s">
                <i class="fa fa-comment text-primary text-3xl"></i>
              </div>
              <div>
                <h3 class="font-semibold text-dark text-xl mb-2">语义理解</h3>
                <p class="text-gray-600 text-lg">智能分析回答内容，优化专业知识呈现方式</p>
              </div>
            </div>
          </div>


        </div>

        <!-- 右侧登录/注册区 -->
        <div class="lg:w-1/2 bg-glass rounded-3xl shadow-card overflow-hidden border border-white/50 scroll-reveal card-3d" style="animation-delay: 0.7s">
          <div class="p-6 md:p-8 lg:p-10">
            <!-- 选项卡导航 -->
            <div class="flex border-b mb-10">
              <button id="login-tab" class="tab-active px-6 py-3 text-lg">登录</button>
              <button id="register-tab" class="tab-inactive px-6 py-3 text-lg">注册</button>
            </div>

            {% if error_message %}
                <div class="bg-red-50 text-red-600 p-4 rounded-xl animate-scale-in border border-red-100 flex items-center">
                  <i class="fa fa-exclamation-circle mr-2 text-lg"></i>
                  <span>{{ error_message }}</span>
                </div>
            {% endif %}
            <!-- 登录表单 -->
            <div id="login-form" class="space-y-7">
                <form class="form-horizontal" action="/main/" method="post">
                    {% csrf_token %}
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2 font-poppins">电话号码登录</h2>
              <p class="text-gray-600 mb-8">请输入注册的手机号码和密码登录系统</p>

              <div>
                <label for="login-phone" class="block text-gray-700 font-medium mb-2 text-lg">手机号码</label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-phone text-gray-400 text-xl"></i>
                  </div>
                  <input style="margin-top: 10px" type="tel" id="login-phone" name="ph" class="w-full pl-14 pr-5 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请输入手机号码" pattern="^1[3-9]\d{9}$" required>
                </div>
              </div>

              <div class="mb-1">
                <label style="margin-top: 20px" for="login-password" class="block text-gray-700 font-medium mb-2 text-lg">密码</label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-lock text-gray-400 text-xl"></i>
                  </div>
                  <input style="margin-top: 10px" type="password" id="login-password" name="ps" class="w-full pl-14 pr-14 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请输入密码" required>
                  <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 flex items-center pr-5 text-gray-400 hover:text-gray-600 transition-colors text-xl">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>
              </div>

              <div class="flex justify-between items-center" style="margin-top: 15px">
                <div class="flex items-center">
                  <input id="remember-me" type="checkbox" class="w-5 h-5 text-primary focus:ring-primary border-gray-300 rounded">
                  <label for="remember-me" class="ml-2 block text-gray-700 text-lg">记住我</label>
                </div>
                <a href="#" class="text-primary hover:underline transition-colors text-lg">忘记密码？</a>
              </div>

              <button style="margin-top: 30px" type="submit" id="login-btn" class="w-full bg-primary text-white py-5 px-6 rounded-2xl font-semibold btn-hover flex items-center justify-center shadow-btn text-lg animate-glow">
                <i class="fa fa-sign-in mr-3 text-xl"></i> 登录系统
              </button>
                </form>
            </div>
            <!-- 注册表单（默认隐藏） -->
            <div id="register-form" class="space-y-6 hidden">
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2 font-poppins">电话号码注册</h2>
              <p class="text-gray-600 mb-8">通过手机号码注册账号，获取面试智能体服务</p>
                {% if error_message %}
              <div class="bg-red-50 text-red-600 p-4 rounded-xl animate-scale-in border border-red-100 flex items-center">
                <i class="fa fa-exclamation-circle mr-2 text-lg"></i>
                <span>{{ error_message }}</span>
              </div>
              {% endif %}
            <form class="form-horizontal" method="post" action="/login/">
                {% csrf_token %}

                <label for="register-phone" class="block text-gray-700 font-medium mb-2 text-lg">手机号码</label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-phone text-gray-400 text-xl"></i>
                  </div>
                  <input type="tel" id="register-phone" name="phone" class="w-full pl-14 pr-5 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请输入手机号码" pattern="^1[3-9]\d{9}$" required>
                </div>

                <label for="register-password" class="block text-gray-700 font-medium mb-2 text-lg">设置用户名</label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-lock text-gray-400 text-xl"></i>
                  </div>
                  <input type="text" id="register-user" name="user" class="w-full pl-14 pr-14 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请设置用户名"  maxlength="8" required>
                </div>



                <label for="register-password" class="block text-gray-700 font-medium mb-2 text-lg">设置密码</label>
                <div class="relative" >
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-lock text-gray-400 text-xl"></i>
                  </div>
                  <input type="password" id="register-password" name="password" class="w-full pl-14 pr-14 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请设置密码" minlength="1" required>
                  <button type="button" id="toggle-register-password" class="absolute inset-y-0 right-0 flex items-center pr-5 text-gray-400 hover:text-gray-600 transition-colors text-xl">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>




              <div>
                <label for="confirm-password" class="block text-gray-700 font-medium mb-2 text-lg">确认密码</label>
                <div class="relative">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-5">
                    <i class="fa fa-lock text-gray-400 text-xl"></i>
                  </div>
                  <input type="password" id="confirm-password" class="w-full pl-14 pr-14 py-4 rounded-2xl border border-gray-300 input-focus bg-white/90 form-input text-lg" placeholder="请确认密码" minlength="1" required>
                  <button type="button" id="toggle-confirm-password" class="absolute inset-y-0 right-0 flex items-center pr-5 text-gray-400 hover:text-gray-600 transition-colors text-xl">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>
                <p id="password-match" class="text-sm text-green-600 hidden mt-2 flex items-center">
                  <i class="fa fa-check-circle mr-1"></i> 密码一致
                </p>
                <p id="password-not-match" class="text-sm text-red-600 hidden mt-2 flex items-center">
                  <i class="fa fa-times-circle mr-1"></i> 两次密码不一致
                </p>
              </div>

              <button style="margin-top: 20px" type="submit" id="register-btn" class="w-full bg-primary text-white py-5 px-6 rounded-2xl font-semibold btn-hover flex items-center justify-center shadow-btn text-lg animate-glow">
                <i class="fa fa-user-plus mr-3 text-xl"></i> 注册账号
              </button>
                </form>
            </div>

            <div class="mt-8 text-center">
              <p class="text-gray-600 text-lg" id="register-link">
                还没有账号？ <span class="text-primary hover:underline font-medium cursor-pointer transition-colors">立即注册</span>
              </p>
              <p class="text-gray-600 text-lg hidden" id="login-link">
                已有账号？ <span class="text-primary hover:underline font-medium cursor-pointer transition-colors">立即登录</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 通知容器 -->
  <div id="notification-container" class="fixed top-4 right-4 z-50 flex flex-col gap-3 w-80"></div>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    // 表单验证与交互逻辑
// 表单验证与交互逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 选项卡切换
    const loginTab = document.getElementById('login-tab');
    const registerTab = document.getElementById('register-tab');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const registerLink = document.getElementById('register-link');
    const loginLink = document.getElementById('login-link');

    function showLoginForm() {
        loginTab.classList.add('tab-active');
        loginTab.classList.remove('tab-inactive');
        registerTab.classList.add('tab-inactive');
        registerTab.classList.remove('tab-active');
        loginForm.classList.remove('hidden');
        registerForm.classList.add('hidden');
        registerLink.classList.remove('hidden');
        loginLink.classList.add('hidden');

        // 添加表单切换动画
        loginForm.style.opacity = '0';
        loginForm.style.transform = 'translateY(20px)';
        setTimeout(() => {
            loginForm.style.opacity = '1';
            loginForm.style.transform = 'translateY(0)';
            loginForm.style.transition = 'opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        }, 50);
    }

    function showRegisterForm() {
        loginTab.classList.add('tab-inactive');
        loginTab.classList.remove('tab-active');
        registerTab.classList.add('tab-active');
        registerTab.classList.remove('tab-inactive');
        loginForm.classList.add('hidden');
        registerForm.classList.remove('hidden');
        registerLink.classList.add('hidden');
        loginLink.classList.remove('hidden');

        // 添加表单切换动画
        registerForm.style.opacity = '0';
        registerForm.style.transform = 'translateY(20px)';
        setTimeout(() => {
            registerForm.style.opacity = '1';
            registerForm.style.transform = 'translateY(0)';
            registerForm.style.transition = 'opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        }, 50);
    }

    loginTab.addEventListener('click', showLoginForm);
    registerTab.addEventListener('click', showRegisterForm);
    registerLink.querySelector('span').addEventListener('click', showRegisterForm);
    loginLink.querySelector('span').addEventListener('click', showLoginForm);

    // 密码显示/隐藏功能
    function setupPasswordToggle(toggleBtn, passwordInput) {
        toggleBtn.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-eye-slash')) {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });
    }

    setupPasswordToggle(document.getElementById('toggle-password'), document.getElementById('login-password'));
    setupPasswordToggle(document.getElementById('toggle-register-password'), document.getElementById('register-password'));
    setupPasswordToggle(document.getElementById('toggle-confirm-password'), document.getElementById('confirm-password'));

    // 确认密码验证
    const confirmPassword = document.getElementById('confirm-password');
    const passwordMatch = document.getElementById('password-match');
    const passwordNotMatch = document.getElementById('password-not-match');

    confirmPassword.addEventListener('input', function() {
        const registerPassword = document.getElementById('register-password').value;
        if (this.value === registerPassword) {
            passwordMatch.classList.remove('hidden');
            passwordNotMatch.classList.add('hidden');
            passwordMatch.style.animation = 'none';
            passwordMatch.offsetHeight; // 触发重绘
            passwordMatch.style.animation = 'scale-in 0.3s ease-out forwards';
        } else {
            passwordMatch.classList.add('hidden');
            passwordNotMatch.classList.remove('hidden');
            passwordNotMatch.style.animation = 'none';
            passwordNotMatch.offsetHeight; // 触发重绘
            passwordNotMatch.style.animation = 'scale-in 0.3s ease-out forwards';
        }
    });

    // 表单验证
    function validateLoginForm() {
        const phone = document.getElementById('login-phone').value;
        const password = document.getElementById('login-password').value;

        if (!phone) return '请输入手机号码';
        if (!password) return '请输入密码';
        if (!/^1[3-9]\d{9}$/.test(phone)) return '请输入正确的手机号码';

        return '';
    }

    function validateRegisterForm() {
        const phone = document.getElementById('register-phone').value;
        const username = document.getElementById('register-user').value;
        const password = document.getElementById('register-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;

        if (!phone) return '请输入手机号码';
        if (!username) return '用户名不能为空';
        if (!password) return '请设置密码';
        if (!confirmPassword) return '请确认密码';

        // 关键验证：两次密码必须一致
        if (password !== confirmPassword) {
            return '两次输入的密码不一致';
        }

        if (!/^1[3-9]\d{9}$/.test(phone)) return '请输入正确的手机号码';
        if (username.length > 8) return '用户名长度不能超过8个字符';

        return '';
    }

    // 通知提示功能
    function showNotification(message, type) {
        const container = document.getElementById('notification-container');
        const notification = document.createElement('div');
        notification.className = 'notification px-6 py-4 rounded-2xl shadow-lg flex items-center transition-all duration-500';

        if (type === 'success') {
            notification.classList.add('bg-green-500', 'text-white');
            notification.innerHTML = `<i class="fa fa-check-circle mr-3 text-xl"></i> ${message}`;
        } else if (type === 'error') {
            notification.classList.add('bg-red-500', 'text-white');
            notification.innerHTML = `<i class="fa fa-exclamation-circle mr-3 text-xl"></i> ${message}`;
        } else if (type === 'info') {
            notification.classList.add('bg-blue-500', 'text-white');
            notification.innerHTML = `<i class="fa fa-info-circle mr-3 text-xl"></i> ${message}`;
        }

        container.appendChild(notification);

        setTimeout(() => {
            notification.classList.add('show');
        }, 10);

        setTimeout(() => {
            notification.classList.remove('show');
            notification.style.opacity = '0';
            setTimeout(() => {
                container.removeChild(notification);
            }, 500);
        }, 3500);
    }

    // 登录按钮功能
    document.getElementById('login-btn').addEventListener('click', function() {
        const error = validateLoginForm();
        if (error) {
            showNotification(error, 'error');
            return;
        }

        this.classList.add('scale-95');
        setTimeout(() => {
            this.classList.remove('scale-95');
        }, 200);

        // 模拟登录
        showNotification('登录成功！即将进入系统', 'success');
        setTimeout(() => {
            window.location.href = '/main/'; // 登录成功后跳转到 /main/
        }, 1500);
    });

    // 注册按钮功能
    document.getElementById('register-btn').addEventListener('click', function() {
        const error = validateRegisterForm();

        // 如果密码不一致，阻止注册并显示错误
        if (error) {
            showNotification(error, 'error');
            return;
        }

        this.classList.add('scale-95');
        setTimeout(() => {
            this.classList.remove('scale-95');
        }, 200);

        // 模拟注册
        showNotification('注册成功！请登录系统', 'success');
        setTimeout(showLoginForm, 1500);
    });

    // 3D粒子背景效果
    function initParticles() {
        const canvas = document.getElementById('particles-bg');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        const particleCount = window.innerWidth > 768 ? 150 : 100;
        const particles = [];
        const colors = [
            { primary: '#165DFF', secondary: '#4080FF' },
            { primary: '#36D399', secondary: '#6BE6B0' },
            { primary: '#FF9F43', secondary: '#FFB978' }
        ];

        const depth = 500;
        let mouseX = canvas.width / 2;
        let mouseY = canvas.height / 2;
        let mouseRadius = 200;
        let tiltX = 0;
        let tiltY = 0;

        window.addEventListener('mousemove', function(e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            tiltX = (mouseX - canvas.width / 2) / canvas.width * 5;
            tiltY = (mouseY - canvas.height / 2) / canvas.height * 5;
        });

        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', function(e) {
                if (e.gamma !== null && e.beta !== null) {
                    tiltX = Math.max(-10, Math.min(10, e.gamma / 5));
                    tiltY = Math.max(-10, Math.min(10, e.beta / 5));
                }
            });
        }

        class Particle {
            constructor() {
                this.reset();
            }

            reset() {
                this.x3d = (Math.random() - 0.5) * 2 * depth;
                this.y3d = (Math.random() - 0.5) * 2 * depth;
                this.z3d = Math.random() * depth;

                const colorSet = colors[Math.floor(Math.random() * colors.length)];
                this.primaryColor = colorSet.primary;
                this.secondaryColor = colorSet.secondary;
                this.size = Math.random() * 3 + 1;

                this.speedX = (Math.random() - 0.5) * 0.5;
                this.speedY = (Math.random() - 0.5) * 0.5;
                this.speedZ = Math.random() * 0.8 + 0.2;

                this.alpha = Math.random() * 0.8 + 0.2;
                this.pulse = Math.random() * Math.PI * 2;
                this.pulseSpeed = Math.random() * 0.02 + 0.01;
            }

            update() {
                this.x3d += tiltX * 0.5;
                this.y3d += tiltY * 0.5;
                this.x3d += this.speedX;
                this.y3d += this.speedY;
                this.z3d -= this.speedZ;
                this.pulse += this.pulseSpeed;

                if (this.z3d < 0 || Math.abs(this.x3d) > depth * 2 || Math.abs(this.y3d) > depth * 2) {
                    this.reset();
                }

                this.scale = depth / (depth + this.z3d);
                this.x = this.x3d * this.scale + canvas.width / 2;
                this.y = this.y3d * this.scale + canvas.height / 2;
                this.size2d = this.size * this.scale;

                const dx = this.x - mouseX;
                const dy = this.y - mouseY;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < mouseRadius * this.scale) {
                    const angle = Math.atan2(dy, dx);
                    const force = (mouseRadius * this.scale - distance) / (mouseRadius * this.scale);
                    this.x3d += Math.cos(angle) * force * 1.5;
                    this.y3d += Math.sin(angle) * force * 1.5;
                }
            }

            draw() {
                const brightness = Math.min(1, 1 - this.z3d / depth);

                const gradient = ctx.createRadialGradient(
                    this.x, this.y, 0,
                    this.x, this.y, this.size2d
                );

                const pulseEffect = (Math.sin(this.pulse) * 0.2 + 0.8);

                const primaryRGB = this.primaryColor.replace('#', '').match(/.{2}/g).map(x => parseInt(x, 16));
                const secondaryRGB = this.secondaryColor.replace('#', '').match(/.{2}/g).map(x => parseInt(x, 16));

                gradient.addColorStop(0, `rgba(${primaryRGB[0]}, ${primaryRGB[1]}, ${primaryRGB[2]}, ${this.alpha * brightness * pulseEffect})`);
                gradient.addColorStop(1, `rgba(${secondaryRGB[0]}, ${secondaryRGB[1]}, ${secondaryRGB[2]}, 0)`);

                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size2d, 0, Math.PI * 2);
                ctx.fillStyle = gradient;
                ctx.fill();
            }
        }

        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        const lineDistance = 150;

        function drawLines() {
            for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < lineDistance) {
                        const opacity = (1 - distance / lineDistance) * 0.2;
                        const brightness = (particles[i].z3d + particles[j].z3d) / (2 * depth);

                        ctx.beginPath();
                        ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * (1 - brightness)})`;
                        ctx.lineWidth = 0.8 * (1 - brightness);
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                    }
                }
            }
        }

        function animate() {
            ctx.fillStyle = 'rgba(248, 250, 252, 0.08)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (let particle of particles) {
                particle.update();
                particle.draw();
            }

            drawLines();
            requestAnimationFrame(animate);
        }

        animate();
    }

    // 滚动显示动画
    function initScrollReveal() {
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementBottom = element.getBoundingClientRect().bottom;
                if (elementTop < window.innerHeight - 50 && elementBottom > 0) {
                    element.classList.add('active');
                }
            });
        }

        checkScroll();
        window.addEventListener('scroll', checkScroll);
    }

    // 视差效果
    function initParallax() {
        const parallaxElements = document.querySelectorAll('.parallax');
        window.addEventListener('mousemove', function(e) {
            const mouseX = e.clientX / window.innerWidth - 0.5;
            const mouseY = e.clientY / window.innerHeight - 0.5;
            parallaxElements.forEach(element => {
                const speedX = element.dataset.speedX || 10;
                const speedY = element.dataset.speedY || 10;
                element.style.transform = `translateX(${mouseX * speedX}px) translateY(${mouseY * speedY}px)`;
            });
        });
    }

    // 3D卡片效果
    function initCard3D() {
        const card3DElements = document.querySelectorAll('.card-3d');
        card3DElements.forEach(card => {
            card.addEventListener('mousemove', function(e) {
                const rect = this.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const xRotation = ((y - rect.height / 2) / rect.height) * 8;
                const yRotation = ((rect.width / 2 - x) / rect.width) * 8;
                this.style.transform = `perspective(1000px) rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
            });

            card.addEventListener('mouseout', function() {
                this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
            });
        });
    }

    // 初始化所有功能
    initParticles();
    initScrollReveal();
    initParallax();
    initCard3D();
});
  </script>
</body>
<script src="{% static 'js/yzm.js' %}"></script>
</html>